<template>
  <div style="text-align: start;">
    <el-form label-position="left" label-width="100px" class="demo-dynamic">
      <div style="text-align: center;"><span style="font-size:35px;font-weight:600;">专家管理</span></div>
      <div style="text-align: center;margin:10px 0;"><span
          style="font-size:25px;color:red;">(在原有的基础上只支持文字修改，修改后点击修改按钮即可)</span></div>
      <div class="imgItem">
        <div v-for="(item,index) in expertList" :key="index" style="margin: 20px 20px;border:#cccccc 1px solid;">
          <div style="text-align: center;margin:10px 0 0 0;">
            <el-image class="img" fit="cover" :src="item.imgUrl">
            </el-image>
          </div>
          <el-form-item label="姓名">
            <el-input v-model="item.name" class="ipt" maxlength="5" show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item label="职称">
            <el-input :autosize="{ minRows: 2}" type="textarea" maxlength="10" show-word-limit v-model="item.job"
              class="ipt">
            </el-input>
          </el-form-item>
          <el-form-item label="主要从事">
            <el-input :autosize="{ minRows: 5}" type="textarea" maxlength="35" show-word-limit v-model="item.work"
              class="ipt">
            </el-input>
          </el-form-item>
          <div style="text-align: center;">
            <el-button type="primary" @click="changeExpert(item.id,index)">修改</el-button>
            <el-button type="danger" @click="deleteimgInfo(item.id,index)">删除</el-button>
          </div>

        </div>
      </div>
      <div style="text-align: center;">
        <el-upload action="#" list-type="picture-card" :show-file-list='false' :auto-upload="false"
          :on-change="changefile">
          <i slot="default" class="el-icon-plus">新建</i>
        </el-upload>

        <!-- <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button> -->
        <!-- <el-button @click="addDomain">新增段落</el-button> -->
        <!-- <el-button @click="resetForm('dynamicValidateForm')">重置</el-button> -->
      </div>

    </el-form>
    <el-dialog v-loading="loading" title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div style="margin: 20px 20px;border:#cccccc 1px solid;">
        <div style="text-align: center;margin:10px 0 0 0;">
          <el-image class="img" fit="cover" :src=this.file.url>
          </el-image>
        </div>
        <el-form style="text-align: center;">
          <el-form-item label="姓名">
            <el-input v-model="addFile.name" class="ipt" maxlength="5" show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item label="职称">
            <el-input :autosize="{minRows: 3}" type="textarea" maxlength="10" show-word-limit v-model="addFile.job"
              class="ipt">
            </el-input>
          </el-form-item>
          <el-form-item label="从事">
            <el-input :autosize="{minRows: 5}" type="textarea" maxlength="35" show-word-limit v-model="addFile.work"
              class="ipt">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cannel()">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Expert',
  data () {
    return {
      dialogVisible: false,
      loading: false,
      imgList: [],
      expertList: [],
      file: {},
      addFile: {
        name: '',
        job: '',
        work: ''
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cannel () {
      this.dialogVisible = false
    },
    add () {
      this.loading = true
      let that = this
      if (that.addFile.name && that.addFile.job && that.addFile.work) {
        // 通过FormData构造函数创建一个空对象
        var formData = new FormData()
        // 可以通过append()方法来追加数据
        formData.append('name', that.addFile.name)
        formData.append('job', that.addFile.job)
        formData.append('work', that.addFile.work)
        formData.append('img', that.file.raw)

        this.$axios({
          method: 'post',
          url: '/expert/insert',
          data: formData
        }).then((res) => {
          if (res.status === 200) {
            let data = res.data.data
            that.expertList.push(data)
            this.loading = false
            that.open('创建成功!')
          }
          that.dialogVisible = false
        })
      }
    },
    open (text) {
      this.$notify({
        title: '成功',
        message: text,
        type: 'success'
      })
    },
    changeExpert (id, index) {
      this.$confirm('此操作将修改该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: 'put',
          url: '/expert/update',
          data: {
            id: id,
            job: this.expertList[index].job,
            name: this.expertList[index].name,
            work: this.expertList[index].work
          }
        }).then((res) => {
          if (res.status === 200) {
            console.log(res)
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },
    deleteimgInfo (id, index) {
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: 'get',
          url: '/expert/delete?id=' + id
        }).then((res) => {
          if (res.status === 200) {
            this.expertList.splice(index, 1)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    changefile (file, fileList) {
      this.file = file
      this.dialogVisible = true
    },
    getExpert () {
      this.$axios({
        method: 'get',
        url: '/expert/select?page=1&pageSize=100'
      }).then((res) => {
        if (res.status === 200) {
          this.expertList = res.data.data.rows
        }
      })
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    }
  },
  mounted () {
    this.getExpert()
  }
}
</script>

<style scoped>
.imgItem {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  overflow: hidden;
  margin: 20px 20px;
}
.img {
  width: 120px;
  height: 160px;
}
.el-form-item {
  margin: 20px 20px;
  font-size: 25px;
  font-weight: 600;
}
.el-button {
  margin: 15px 0;
}
.ipt {
  width: 200px;
}
</style>
